<template>
  <view class="upload-clothes">
    <view class="wrapper flex-column">
      <view class="upload">
        <wd-upload
          v-model:file-list="fileList"
          :upload-method="customUpload"
        ></wd-upload>
      </view>
      <view class="clothes-info">
        <view class="info-text"></view>
        <BaseForm :form-list="formList" :form="form" :rules="rules">
          <template #firstFormItemSlot="{ item }">
            <wd-cell
              :prop="item.prop"
              :title="item.label"
              :title-width="item.labelWidth || '80px'"
            >
              <view class="tag-list flex">
                <view
                  v-for="child of item.tagList"
                  :key="child.label"
                  :class="['tag-list-item', { active: child.flag }]"
                  @click="tagClick(child)"
                  >{{ child.label }}</view
                >
              </view>
            </wd-cell>
          </template>
        </BaseForm>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from "vue";

import { uploadFileToCos } from "../../api/common";

const fileList = ref([]);
function customUpload(file, formData, options) {
  console.log(file, formData, options);
  uni.uploadFile({
    url: "http://192.168.110.19:5000/api/clothes/upload",
    name: options.name,
    fileName: options.name,
    fileType: options.fileType,
    formData,
    filePath: file.url,
    success(res) {
      console.log(res);
      if (res.statusCode === options.statusCode) {
        // 设置上传成功
        options.onSuccess(res, file, formData);
      } else {
        // 设置上传失败
        options.onError({ ...res, errMsg: res.errMsg || "" }, file, formData);
      }
    },
  });
}
const formList = ref([
  {
    label: "分类",
    prop: "category",
    type: "changePicker",
    columns: [],
    columnChange: (pickerView, value, columnIndex, resolve) => {
      const item = value[columnIndex];
      if (columnIndex === 0) {
        pickerView.setColumnData(1, []);
        pickerView.setColumnData(2, []);
      }
      resolve();
    },
  },
  {
    label: "名称",
    prop: "name",
    placeholder: "若不填则自动命名为分类",
  },
  {
    label: "季节",
    prop: "season",
    type: "firstSlot",
    tagList: [
      {
        label: "春季",
      },
      {
        label: "夏季",
      },
      {
        label: "秋季",
      },
      {
        label: "冬季",
      },
    ],
  },
  {
    label: "喜好程度",
    prop: "like",
    type: "rate",
  },
  {
    label: "价格",
    prop: "price",
  },
  {
    label: "品牌",
    prop: "brand",
  },
  {
    label: "备注",
    prop: "notes",
    placeholder: "可以填写衣物的标签",
  },
]);
const form = ref({
  like: 0,
});
const rules = ref({
  category: [
    {
      required: true,
      message: "请选择分类",
    },
  ],
});

function tagClick(item) {
  item.flag = !item.flag;
}
</script>

<style scoped lang="scss">
.tag-list {
  width: 100%;
  justify-content: space-between;

  &-item {
    background-color: #eee9e9;
    flex: 1;
    text-align: center;
    margin-left: 32rpx;
    border-radius: 4px;

    &.active {
      background-color: $main-color;
    }
  }

  &-item:first-child {
    margin-left: 0;
  }
}
</style>
